<template>
  <div>
    <div class="main_operation">
      <div class="operation_left"></div>
      <div class="operation_right">
        <span class="fxBox" style="width: 40px;">日期:</span>
        <a-range-picker style="width: 220px" class="mr5"  @change="onDateChange" />
        <span class="fxBox" style="width: 40px;">设备:</span>
        <a-select allowClear v-model="formList.equipment_id" style="width: 250px" placeholder="请选择设备">
          <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
        </a-select>
        <span class="fxBox" style="width: 40px;">品名:</span>
        <a-select allowClear class="mr10" v-model="formList.goods_id" style="width: 200px" placeholder="请选择品名">
          <a-select-option v-for="item in goodsAllData" :value="item.id" :key="item.id">{{item.goods_name}}</a-select-option>
        </a-select>
        <a-button class="mr10" type="primary" @click="()=>{page=1;changeData()}">搜索</a-button>
        <!-- <a-button class="mr10" type="primary">下载数据</a-button> -->
      </div>
    </div>
    <div class="main">
      <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
      	:rowKey="record => record.id"
      	:scroll="{x: 1200, y: 500 }"
      >
        <div slot="operation" slot-scope="text, record">
          <a-button size="small" class="mr10" type="primary" @click="editBtn(record)">编辑</a-button>
          <a-button size="small" type="danger">删除</a-button>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    name: 'registrationRecord',
    data() {
      return {
        /* 通用模块 */
        	//列表
        tableLoad: false,//列表loading状态
        formList:{          //列表信息
        	page: 1
        },
        selectedRowKeys: [],//勾选的id
        /* 通用模块end */
      };
    },
    computed: {
    	...mapState({
    		Fields: state => state.stock.Fields,
    		dataLists: state => state.stock.dataLists,
        requestCode: state => state.stock.requestCode,
        equipmentData: state => state.equipment.equipmentData,// 设备名称信息
        goodsAllData: state => state.productName.goodsAllData,//品名All列表(正式)        
    	}),
    },
    mounted() {
      this.equipmentAll()
      this.goodsAll()
      this.changeData()
    },
    methods: {
      ...mapActions({
        getLists: 'stock/getLists',        //列表
        // dataAdd: 'stock/dataAdd',        //添加
        equipmentAll: 'equipment/equipmentAll', //设备名称信息
        goodsAll: 'productName/goodsAll',        //所有品名信息(正式)
      }),
      /* 通用模块 */
      	// 勾选
      onSelectChange(selectedRowKeys) {
      	console.log('selectedRowKeys changed: ', selectedRowKeys);
      	this.selectedRowKeys = selectedRowKeys
      },
      	// 重新获取列表数据
      changeData(){
      	this.tableLoad = true
      	setTimeout(()=> {
      		this.getLists(this.formList)
      		this.tableLoad = false
      	}, 800);
      },
      	// 页码
      pageChange(page) {
      	this.formList.page = page;
      	this.getLists(this.formList)
      },
      /* 通用模块end */
      onDateChange(date,dateStrings) {
        console.log(date,dateStrings);
        this.formList.created_start = dateStrings[0]
        this.formList.created_end = dateStrings[1]
        if (!date.length) {
          delete this.formList.created_start
          delete this.formList.created_end
        }
      },
    }
  };
</script>

<style scoped></style>
